"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/3
 */
import * as React from 'react'

const {View, FlatList, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import {allGroups} from "../../assets/data";
import Line from "../../component/Line";
import MyText from "../../component/MyText";
import Avatar from "../../component/Avatar";
import MyIcon from "../../component/icon";
import {groupStyles} from "../../assets/styles/groups";
import {AuthPage} from "../../interface/router";
import Colors from "../../assets/styles/Colors";

class AllGroupsPage extends React.Component<AuthPage, any> {
    componentDidMount() {
        this.props.dispatch({
            type: 'auth/fetchGroupList',
            payload: {pi: 1, ps: 5}
        });
    }


    onJoinGroup = (item) => {
        const group: groupItem = item.group;
        // console.log('加入群组',group.id);
        this.props.dispatch({
            type: 'auth/joinGroup',
            payload: {
                groupId: group.id
            }
        })
    };
    onEndReached = () => {
        // console.log('到底部1', this.props.auth);
        if (!this.props.auth.notInGroupsDTOS.last) {
            this.props.dispatch({
                type: 'auth/fetchGroupList',
                payload: {pi: this.props.auth.notInGroupsDTOS.number + 2, ps: 5}
            })
        }
    };


    renderItem = ({item, index}) => {

        const avatarProps = {
            borderWidth: 1,
            borderColor: '#fff',
            size: 35,
        };
        const group: notInGroupItem = item;
        return (
            <View style={[commonStyles.flexColumn, groupStyles.listItem]} key={index}>
                <View style={commonStyles.flexRow}>
                    <Avatar source={{uri: group.group.mainPic}} circle={false} size={autoSize(85)}/>
                    <View style={[commonStyles.flexColumn, commonStyles.flex1, groupStyles.content]}>
                        <MyText numberOfLines={1} fontSize={14} color={Colors.Title} fontWeight={'500'}>{group.group.groupName}</MyText>
                        <MyText numberOfLines={2} style={{marginTop:5}} fontSize={14} color={Colors.Title}>{group.group.description}</MyText>
                    </View>
                </View>
                <View>
                    <View style={commonStyles.flexRow}>
                        <View style={[commonStyles.flexRow, commonStyles.flex1, groupStyles.content]}>
                            <Avatar {...avatarProps}
                                    content={`+${group.users.length}`}
                                    style={{zIndex: 10}}/>
                            {group.users.map((u: userItem, i) => {
                                if (i > 3) return null;
                                return <Avatar {...avatarProps}
                                               key={i}
                                               style={[groupStyles.member, {
                                                   zIndex: 8 - i * 2,
                                                   backgroundColor: '#DC6451'
                                               }]}/>

                            })}
                            {/*<Avatar {...avatarProps}*/}
                            {/*style={[groupStyles.member, {zIndex: 8, backgroundColor: '#DC6451'}]}/>*/}
                            {/*<Avatar {...avatarProps}*/}
                            {/*source={item.avatar}*/}
                            {/*style={[groupStyles.member, {zIndex: 6}]}/>*/}
                            {/*<Avatar {...avatarProps}*/}
                            {/*source={item.avatar}*/}
                            {/*style={[groupStyles.member, {zIndex: 4}]}/>*/}
                            {/*<Avatar {...avatarProps}*/}
                            {/*source={item.avatar}*/}
                            {/*style={[groupStyles.member, {zIndex: 0}]}/>*/}
                        </View>
                        <TouchableOpacity onPress={this.onJoinGroup.bind(this, item)}>
                            <View
                                style={[commonStyles.flexRow, groupStyles.joinBtn, item.is_join ? groupStyles.isJoin : null]}>
                                <MyIcon name={!item.is_join ? 'icon-jia1' : 'icon-gou'}
                                        color={item.is_join ? '#999' : '#000'} size={15}/>
                                <MyText fontSize={15} style={{marginLeft: 5}}
                                        color={item.is_join ? '#999' : '#000'}>{'加入'}</MyText>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    };


    render() {
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               rightButton={{title: '已完成', tintColor: '#fff', handler: Actions.pop}}
                               title={{title: '所有群组', tintColor: '#fff'}}
                />
                <FlatList data={this.props.auth.notInGroupsDTOS.content}
                          renderItem={this.renderItem}
                          keyExtractor={(item, index) => index}
                          ItemSeparatorComponent={() => <Line height={10}/>}
                          onEndReached={this.onEndReached}
                          extraData={this.state}/>
            </View>
        );
    }
}


export default connect(
    ({auth}) => ({auth})
)(AllGroupsPage);